<template>
	<view class="category-container">
		<!-- 左侧分类导航 -->
		<scroll-view scroll-y class="category-nav">
			<view 
				class="nav-item" 
				v-for="(item, index) in categories" 
				:key="index"
				:class="{ active: currentCategory === index }"
				@tap="switchCategory(index)"
			>
				{{ item.name }}
			</view>
		</scroll-view>
		
		<!-- 右侧分类内容 -->
		<scroll-view scroll-y class="category-content">
			<view class="content-wrapper">
				<view class="category-title">{{ categories[currentCategory].name }}</view>
				<view class="sub-category-list">
					<view 
						class="sub-category-item"
						v-for="(subItem, subIndex) in categories[currentCategory].subCategories"
						:key="subIndex"
						@tap="goToList(subItem)"
					>
						<image :src="subItem.icon" mode="aspectFill"></image>
						<text>{{ subItem.name }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentCategory: 0,
			categories: [
				{
					name: '男生频道',
					subCategories: [
						{ name: '玄幻', icon: '/static/875f-kpamyih7048893.jpg' },
						{ name: '武侠', icon: '/static/OIP-C.jpg' },
						{ name: '都市', icon: '/static/OIP1-C.jpg' },
						{ name: '历史', icon: '/static/v2-55fbeadec241be7036ab072d00ba78dc.jpg' },
						{ name: '科幻', icon: '/static/OIP2-C (1).jpg' },
						{ name: '游戏', icon: '/static/50551.jpg' }
					]
				},
				{
					name: '女生频道',
					subCategories: [
						{ name: '现代言情', icon: '/static/2023012967007493.jpg' },
						{ name: '古代言情', icon: '/static/0151a6616ced4b11013e8943ff7b65.jpg' },
						{ name: '幻想言情', icon: '/static/3193208.jpg' },
						{ name: '青春校园', icon: '/static/37d3d539b6003af3fe0e7162352ac65c1038b678.jpg' },
						{ name: '总裁豪门', icon: '/static/2022071434645521.jpg' }
					]
				},
				{
					name: '出版物',
					subCategories: [
						{ name: '文学', icon: '/static/15909912776587.jpg' },
						{ name: '教育', icon: '/static/d56ee175ead85e9a.jpg' },
						{ name: '心理', icon: '/static/kIP-C (1).jpg' },
						{ name: '经管', icon: '/static/541663a3N893cd056.jpg' },
						{ name: '励志', icon: '/static/0b8c26ed5f26b55e.jpg' }
					]
				}
			]
		}
	},
	methods: {
		// 切换分类
		switchCategory(index) {
			this.currentCategory = index
		},
		// 跳转到分类书籍列表
		goToList(category) {
			uni.navigateTo({
				url: `/pages/book-list/book-list?category=${encodeURIComponent(JSON.stringify(category))}`
			})
		}
	}
}
</script>

<style lang="scss">
.category-container {
	display: flex;
	height: 100vh;
	background: #f5f5f5;
	
	.category-nav {
		width: 200rpx;
		height: 100%;
		background: #fff;
		
		.nav-item {
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
			font-size: 28rpx;
			color: #333;
			position: relative;
			
			&.active {
				color: #3cc51f;
				background: #f5f5f5;
				
				&::before {
					content: '';
					position: absolute;
					left: 0;
					top: 50%;
					transform: translateY(-50%);
					width: 6rpx;
					height: 36rpx;
					background: #3cc51f;
				}
			}
		}
	}
	
	.category-content {
		flex: 1;
		height: 100%;
		
		.content-wrapper {
			padding: 20rpx;
			
			.category-title {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 30rpx;
			}
			
			.sub-category-list {
				display: flex;
				flex-wrap: wrap;
				
				.sub-category-item {
					width: 33.33%;
					display: flex;
					flex-direction: column;
					align-items: center;
					margin-bottom: 40rpx;
					
					image {
						width: 100rpx;
						height: 100rpx;
						margin-bottom: 16rpx;
					}
					
					text {
						font-size: 26rpx;
						color: #333;
					}
				}
			}
		}
	}
}
</style> 